<template>
	<view class="fnumber">
		<view class="kong" v-if="list.length==0">
			<view class="acea-row row-middle row-center none-t">
				<text>暂无亲情号呢~</text>
			</view>
		</view>
		
		<view class="body p30">
			<view class="acea-row row-middle">
				<view class="color333 fs-40 bold">请添加亲情号</view>
				<view class="ml20 fs-28" style="color: #FF301A;">最多可添加3个亲情号</view>
			</view>
			<view class="acea-row">
				<block v-for="(item,index) in list" :key="index">
					<view class="item acea-row row-middle row-column row-center mt30" @click="delect(item)">
						<view class="">
							<image class="avatar" :src="item.avatar" mode="aspectFit"></image>
						</view>
						<view class="color333 fs-32 bold mt20 line1">ID:{{ item.id }}</view>
					</view>
				</block>
				
				<view class="item acea-row row-middle row-column row-center mt30" @click="open" v-if="list.length<3">
					<view class="cricle acea-row row-middle row-center">
						<text class="iconfont icon-add"></text>
					</view>
					<view class="color333 fs-32 bold mt20">点击添加</view>
				</view>
			</view>
		</view>
		
		<suspension></suspension>
		
		<uni-popup ref="popup" type="center">
			<view class="code-nav acea-row row-middle row-around row-column">
				<view class="color333 bold fs-40">亲情号添加</view>
				<block v-if="is_show">
					<view class="color333 fs-40">
						<input v-model="code" class="inpout" type="number" placeholder="请输入ID号" placeholder-class="color666 fs-30"/>
					</view>
					<view class="acea-row row-between-wrapper px30" style="width: 100%;">
						<view class="btn">取消</view>
						<view class="btn" :class="code?'on':''" @click.stop="confirm">确定</view>
					</view>
				</block>
				<block v-else>
					<view>
						<image class="success-icon" src="https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/success-icon.png" mode="aspectFit"></image>
					</view>
					<view class="queding" @click="close">确定</view>
				</block>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import{
		loveList,
		addnumber,
		delnumber
	} from '@/api/admin.js'
	import suspension from '@/components/suspension.vue';
	export default {
		components:{
			suspension
		},
		data() {
			return {
				code:'',
				list:[],
				is_show:true,
			}; 
		},
		onLoad() {
			this.getlist();
		},
		methods:{
			delect(item){
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否删除该亲情号',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							delnumber({ id:item.id }).then(res=>{
								that.$util.Tips({ title : res.msg },()=>{
									that.getlist();
								})
							}).catch(err=>{
								that.$util.Tips({ title : err })
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getlist(){
				loveList().then(res=>{
					this.list = res.data.data;
				})
			},
			confirm(){
				let that = this;
				if( !that.code ) return that.$util.Tips({ title : '请输入亲情号id' })
				addnumber({ love_uid : that.code }).then(res=>{
					that.$util.Tips({ title : '添加中...' },()=>{
						that.is_show = false;
					})
				}).catch(err=>{
					that.$util.Tips({ title : err })
				})
			},
			open(){
				this.$refs.popup.open();
			},
			close(){
				this.$refs.popup.close();
				this.$util.Tips({ title: '刷新中...' },()=>{
					this.getlist();
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{ background-color: #ffffff !important; }
	.fnumber{
		
		.kong{
			width: 520rpx;
			height: 520rpx;
			background-image: url('https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/none-icon.png');
			background-size: 100% 100%;
			margin: 30rpx auto;
			position: relative;
			
			.none-t{
				width: 100%;
				color: #888888;
				font-size: 34rpx;
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
			}
		}
		
		.item{
			width: 180rpx;
			
			.cricle{
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				background: #D8D8D8;
				
				.icon-add{
					font-size: 80rpx;
					color: #8C8C8C;
				}
			}
			
			.avatar{
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
			}
			
		}
		
		.code-nav{
			width: 662rpx;
			height: 472rpx;
			border-radius: 10rpx;
			background-color: #ffffff;
			
			.inpout{
				width: 570rpx;
				height: 90rpx;
				border-radius:90rpx;
				line-height: 90rpx;
				box-sizing: border-box;
				border: 0.8px solid #6F6F6F;
				padding: 0 30rpx;
				// margin: 50rpx 0;
			}
			.btn{
				width: 240rpx;
				height: 96rpx;
				border-radius: 48rpx;
				background: #E7E7E7;
				text-align: center;
				line-height: 96rpx;
				color: #999999;
				font-size: 36rpx;
				
				&.on{
					background: rgba(65, 204, 139, 0.3);
					color: #41CC8B;
				}
			}
			.success-icon{
				width: 132rpx;
				height: 132rpx;
			}
			.queding{
				width: 416rpx;
				height: 96rpx;
				text-align: center;
				line-height: 96rpx;
				background: rgba(65, 204, 139, 0.3);
				border-radius: 50rpx;
				color: #41CC8B;
				font-size: 36rpx;
			}
		}
		
	}
</style>
